<template>
  <a-spin :spinning="loading">
    <a-table class="expandBol" :customHeaderRow="customHeaderRow" :pagination="false" bordered :dataSource="list" :columns="columns"/>
  </a-spin>
</template>
<script setup>
import { ref } from 'vue'
import {getListCargo} from "@/api/tail/bolList.js";
import {message} from "ant-design-vue";
const loading = ref(false)
const props = defineProps({
  ycReference:{
    type:String,
  }
})
const list = ref([])
const columns = [
  {
    title:'仓库SKU',
    dataIndex:'warehouseSku',
    align:'center',
  },
  {
    title:'数量',
    dataIndex:'pieces',
    align:'center',
  },
  {
    title:'描述',
    dataIndex:'description',
    align:'center',
  },
]
const init = async () => {
  try{
    loading.value = true
    const res = await getListCargo({
      ycReference:props.ycReference
    })
    list.value = res.result.records
  }catch (e){
    message.error(e)
  }finally {
    loading.value = false
  }
}
const customHeaderRow = (column, index) => {
  return {
    class: "header-row",
  };
};
defineExpose({
  init
})
</script>
<style lang="less">
.expandBol {
  margin:20px;
  .header-row > th {
    background-color: #6593d5!important;
  }
}
</style>
